<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            height: 150px;
            background-color: rgba(1, 50, 50, 0.5);
            padding: 20px;
            margin: 100px auto;
        }

        .sub div {
            margin-bottom: 30px;
            position: relative;
        }

        .sub span {
            font-size: 12px;
            position: absolute;
            left: 0px;
            top: 30px;
            display: none;
        }

        .sub .erro {
            display: block;
            color: red;

        }

        .sub .right {
            display: block;
            color: aqua;
        }

        .bar {
            /* text-align: center; */
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <form class="sub" action="javascript:;" method="get">
            <div>
                <p>用户名：<input type="text" class="user"></p>
                <span class="useSpan">用户名不正确</span>
            </div>
            <div>
                <p>密&emsp;码：<input type="password" class="pwd"></p>
                <span class="pwdSpan">密码不正确</span>
            </div>
            <div class="bar">
                <input type="submit" class="subBtn" value="登录">
                <input type="reset" class="reBtn" value="取消">
            </div>
        </form>
    </div>

</body>
<script>
    var user = document.getElementsByClassName("user")[0];
    var useSpan = document.getElementsByClassName("useSpan")[0];
    var pwd = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwdSpan")[0];
    var subBtn = document.getElementsByClassName("subBtn")[0];
    var sub = document.getElementsByClassName("sub")[0];
    var body = document.getElementsByTagName("body")[0];

    // 随机背景颜色
    // var r = Math.round(Math.random()*255);
    // var g = Math.round(Math.random()*255);
    // var b = Math.round(Math.random()*255);
    // var a = parseFloat(Math.random().toFixed(1));
    // console.log(r,g,b,a);
    // body.style.backgroundColor = `rgba(${randColor()}, ${randColor()}, ${randColor()},0.5)`;
    // body.style.backgroundColor = randColor();
    function randColorgb() {
        return Math.round(Math.random() * 255);
    }

    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }


    var isUserOk;
    var isPwdOk;
    var isPhoneOk;
    var isEmailOk;
    // 用户名
    user.oninput = function () {
        isUserOk = false;
        console.log(userList());
        // console.log(`user_${user.value}`);
        if (userList().indexOf(user.value) != -1) {
            useSpan.textContent = "用户名正确";
            useSpan.className = "right";
            isUserOk = true;
        } else {
            useSpan.className = "erro";
        }
    }

    // 密码
    pwd.oninput = function () {
        if (user.value) {
            isPwdOk = false;
            console.log(getCookie(`pwd_${user.value}`));
            console.log(pwd.value);
            var str = getCookie(`pwd_${user.value}`);
            if (str === pwd.value) {
                pwdSpan.textContent = "密码名正确";
                pwdSpan.className = "right";
                isPwdOk = true;
            } else {
                pwdSpan.className = "erro";
            }
        } else {
            pwdSpan.textContent = "请先输入用户名";
            pwdSpan.className = "erro";
        }
    }

    subBtn.onclick = function () {
        if (isUserOk && isPwdOk) {
            // location.href = "index.html";
            setCookie("ski", user.value, 3);
            open("index.html", "index")
        }
    }
</script>

</html>